#agent {
  .section-title {
    font-size: 32px;
    color: #000;
    text-align: center;
    font-weight: normal;
  }

  .agent-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #5599ee;
    padding: 41px 0 57px;

    .agent-slogan {
      width: 1207px;
      padding-bottom: 46px;

      img {
        width: 100%;
      }
    }
  }

  .advantage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 100px;

    .section-title {
      padding: 60px 0 63px;
    }

    .list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 1245px;
      margin-top: -82px;

      li {
        width: 385px;
        height: 267px;
        background-size: cover;
        margin: 82px 15px 0;
        position: relative;
        cursor: pointer;

        .content {
          position: absolute;
          left: 15px;
          right: 15px;
          bottom: -33px;
          padding: 20px 10px 20px 20px;
          display: flex;
          flex-direction: row;

          &:after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(-52deg, #0c68e6 0%, #5599ee 100%),
            linear-gradient(#f4f5fb, #f4f5fb);
            background-blend-mode: normal, normal;
            opacity: 0.72;
          }

          .img-container {
            position: relative;
            z-index: 100;
            width: 44px;
            margin-right: 17px;

            img {
              width: 100%;
            }
          }

          .text-container {
            position: relative;
            z-index: 100;

            .title {
              font-size: 18px;
              color: #ffffff;
            }

            .desc {
              font-size: 16px;
              color: #ffffff;
            }
          }
        }

        &:hover {
          .content {
            flex-direction: column;
            align-items: center;
            padding: 44px 0;

            .img-container {
              width: 85px;
            }

            .text-container {
              text-align: center;

              .title {
                margin: 28px 0 22px;
              }
            }
          }
        }
      }
    }
  }

  .scheme {
    background-image: linear-gradient(0deg, #4118f3 0%, #2a69ff 100%);
    padding: 1px 15px 86px;
    text-align: center;
    * {
      margin: 0;
      padding: 0;
    }
    h2 {
      font-size: 29px;
      font-weight: bold;
      color: #ffffff;
      letter-spacing: 1px;
      margin: 86px 0 68px;
    }
    .table {
      display: inline-block;
      table {
        box-shadow: 12px 16px 125px 0px rgba(0, 30, 108, 0.69);
        td {
          text-align: left;
          background-color: #ffffff;
          padding: 12px 35px;
          width: 520px;
          font-size: 18px;
          span {
            display: inline-block;
            color: #ffffff;
            background-color: #839eff;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 50%;
            margin-right: 35px;
            text-align: center;
            font-size: 16px;
            vertical-align: middle;
          }
          div {
            display: inline-block;
            vertical-align: middle;
          }
          h4 {
            color: #474747;
            font-size: 20px;
          }
          p {
            color: #969696;
            font-size: 18px;
          }
        }
        tr td:first-child {
          border-right: 1px solid #e4e4e4; /*no*/
        }
        tr:nth-child(2n-1) td {
          background-color: #eaeffd;
        }
        tr:last-child td {
          text-align: center;
          border: 0;
          color: #b3b4b9;
          font-size: 16px;
          background-color: #ffffff;
          border-top: 1px solid #f4f4f4; /*no*/
        }
      }
    }
    .item {
      display: inline-block;
      box-sizing: border-box;
      height: 70px;
      padding: 0 50px;
      border: 2px dotted #ffffff; /*no*/
      border-radius: 35px;
      line-height: 70px;
      text-decoration: none;
      font-size: 18px;
      color: #ffffff;
      letter-spacing: 1px;
      margin: 0 35px;
    }
    .item:hover,
    .item-active {
      background-color: #587bff;
    }
    button {
      background-color: #ffffff;
      height: 78px;
      padding: 0 50px;
      line-height: 78px;
      border-radius: 39px;
      color: #2e58f9;
      letter-spacing: 1px;
      font-size: 24px;
      font-weight: bold;
      display: block;
      margin: 100px auto 0;
    }
  }

  .flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 92px 0;
    background-color: #f4f5fb;
    .section-title{
      font-size: 29px;
      font-weight: bold;
      color: #2e58f9;
    }
    .section-desc {
      font-size: 18px;
      color: rgba(0, 0, 0, .5);
      margin: 32px 0 141px;
    }
    .list {
      width: 1324px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      li {
        flex-shrink: 1;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 16.66666666%;
        & + li {
          .img-container{
            position: relative;
            &:before{
              content: '';
              position: absolute;
              left: -55px;
              top: 50%;
              margin-top: -15px;
              width: 18px;
              height: 30px;
              background: url("../images/arrow.png") center no-repeat;
              background-size: cover;
            }
          }
        }

        .img-container {
          width: 121px;
          height: 121px;
          background-color: #2e58f9;
          border-radius: 121px;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            height: 60px;
          }

        }

        .text-container {
          margin-top: 32px;
          padding: 0 10px;
          .title {
            text-align: center;
            font-size: 18px;
          }

          .desc {
            margin-top: 16px;
            text-align: center;
            font-size: 14px;
          }
        }
      }
    }
    .btn-container{
      margin-top: 105px;
      .btn-agent{
        width: 337px;
        height: 68px;
        border-radius: 34px;
        background-color: #2e58f9;
        box-shadow: 5px 7px 7px 0
        rgba(46, 88, 249, 0.31);
        font-size: 24px;
        font-weight: bold;
      }
    }
  }
}
